{% extends 'base.html' %}
{% block 'body' %}
<ul id="pages">
{% for page in pages %}
	<li data-pid="{{ page.id }}"><a href="{{ reverse_url('edit', page.slug) }}">{{ page.name }}</a>
		<a href="#" class="toggle">({% if page.hidden %}off{% else %}on{% end %})</a></li>
{% end %}
</ul>

<form id="create-page" method="post" action="{{ reverse_url('create') }}">
	{{ xsrf_form_html() }}
	<label>Create page <input type="text" name="name" placeholder="Name"></label>
</form>

<script>
var hide_requests = {};
var request = new Request({url: '{{ reverse_url('order') }}'});

new OrderList('pages', {
	attrib: 'pid',
	onEnd: function(target, order) {
		query = order.object;
		query['_xsrf'] = Cookie.read('_xsrf');
		request.post(Object.toQueryString(query));
	}
});

$('pages').addEvent('click:relay(.toggle)', function(e, target) {
	e.preventDefault();
	var page_id = target.getParent().dataset['pid'];

	if (!hide_requests[page_id])
		hide_requests[page_id] = new Request({
			link: 'cancel',
			url: '{{ reverse_url('hide') }}',
			onSuccess: function(response) {
				target.set('text', response);
			}
		});

	hide_requests[page_id].post('page_id=' + page_id + '&_xsrf=' + Cookie.read('_xsrf'));
});
</script>
{% end %}